<template>
  <div :style="{height: height}">
    <div class="personHead">
      <div class="img">
        <img src="static/images/person/head.png" alt="" @click="toPersonModify" >
      </div>
      <div class="info">
        <div class="alias">
          奔跑的土豆
        </div>
      </div>
    </div>
    <div class="personDescribe">
      <div class="item">
        <img src="static/images/person/icon_message.png" alt="">
        <span class="describe">我的点赞</span>
        <span class="count">86</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
      <div class="item">
        <img src="static/images/person/icon_location.png" alt="">
        <span class="describe" >我的收藏</span>
        <span class="count">12</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
      <div class="item">
        <img src="static/images/person/icon_comment.png" alt="">
        <span class="describe" >我的评论</span>
        <span class="count">56</span>
        <img src="static/images/person/icon_next step.png" alt="">
      </div>
      <button @click="toPersonal">员工登录</button>
    </div>
    <div class="personFooter">
      <Footer :isPerson="isPerson"></Footer>
    </div>
  </div>

</template>

<script>
import Footer from "../../components/Footer";
export default {
  name: "Personal",
  components:{Footer},
  data() {
    return {
      height:0,//页面默认高度
      isPerson:true,//表明是否是个人页,影响到底部按钮的颜色
    }
  },
  methods:{
    //点击头像跳转到个人信息修改页面
    toPersonModify(){
      this.$router.push('/personModify')
    },
  //点击员工登录跳转到个人中心
    toPersonal(){
      this.$router.push('/personal')
    }
  },
  created() {
    this.height=document.documentElement.clientHeight+"px"
  }
}
</script>

<style lang="less" scoped>
div{
  width: 375px;
  padding: 0;
  .personHead{
    width: 375px;
    height: 160px;
    padding: 10px ;
    display: flex;
    .img{
      width: 84px;
      height: 84px;
      //background-color: gold;
      display: inline-block;
      padding: 0;
      img{
        display: block;
        width: 84px;
        height: 87px;
        margin-top:45px ;
        margin-left: 16px;
      }
    }
    .info{
      width: 225px;
      height: 140px;
      // background-color: lawngreen;
      display: inline-block;
      padding-left: 10px;
      .alias{
        width: 90px;
        height: 28px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333336;
        line-height: 28px;
        margin-top:45px ;
        margin-left: 16px;
      }
    }
  }
  .personDescribe{
    width: 375px;
    height:69%;
    // background-color: lightgray;
    border-top: 4px solid lightgray;
    padding:10px;
    .item{
      width: 355px;
      height: 52px;
      line-height: 52px;
      //background-color: lightgreen;
      display: flex;
      align-items: center;

      img{
        width: 20px;
        height: 20px;
        display: inline-block;
      }
      .describe{
        width: 260px;
        font-size: 20px;
        padding-left: 10px;
      }
      .count{
        width: 50px;
        font-size: 16px;
        color: gray;
        text-align: right;
      }
    }
    button{
      width: 300px;
      height: 45px;
      background-color: #233982;
      border-radius: 6px;
      color: white;
      margin-top: 30%;
      margin-left: 20px;
      border: 0;
    }
    button:focus{
      outline: 0;
      background-color: gray;
    }
  }
  .personFooter{
    width: 375px;
    height: 63px;
    background-color: white;
    position: fixed;
    bottom: 0;
    border-top: 4px solid lightgray;

  }
}
</style>
